<script>
import { Delete, Edit } from '@element-plus/icons'

export default {
  data: function () {
    return {
      inputValue: 'Default Input Value',
      switchValue: false,
      alertSwitchValue: false,
      tableData: [
        { lang: 'HTML', purp: 'UI & Component' },
        { lang: 'Javascript', purp: 'Automation & Biz-Logic' },
        { lang: 'CSS', purp: 'UI & Styles' }
      ]
    }
  },
  methods: {
    onClick: function () {
      window.alert('clicked !')
    }
  },
  components: {
    Delete,
    Edit
  }
}
</script>

<template>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/button.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/icon.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/link.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/input.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/switch.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/alert.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/dropdown.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/table.html</div>

  <h1> 1. Button </h1>

  <el-button type="primary" @click="onClick">Button (Primary)</el-button>

  <h1> 2. Icon </h1>

  <div> 使用 icon 组件需要额外的包 </div>
  <pre style="text-align: left;">
  // inatall
    npm install @element-plus/icons --save

  // code
    ...
    import { Delete, Edit } from '@element-plus/icons'
    ...
    component: {
      Delete,
      Edit
    }
  </pre>
  <br/>
  <delete style="width: 20px; height: 20px; margin-right: 8px;" />
  <edit style="width: 20px; height: 20px; margin-right: 8px;" />

  <h1> 3. Link </h1>

  <el-link type="primary" href="https://www.baidu.com" target="_blank"> 百度一下，你就知道 </el-link>

  <h1> 4. Input </h1>
  <div> Input Value: {{ inputValue }} </div>
  <div style="width: 500px; margin: 0 auto;">
    <el-input v-model="inputValue" placeholder="Please input" />
  </div>

  <h1> 5. Switch </h1>
  <div> Switch Value: {{ switchValue }} </div>
  <div style="width: 500px; margin: 0 auto;">
    <el-switch v-model="switchValue" />
  </div>

  <h1> 6. Alert </h1>
  <div> Alert Show/Hide Swith: <el-switch v-model="alertSwitchValue" /> </div>
  <div style="width: 500px; margin: 0 auto;">
    <el-alert v-if="alertSwitchValue" title="Alert Show" type="success" effect="dark"></el-alert>
  </div>

  <h1> 7. Dropdown </h1>
  <el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus"
          >Action 2</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-circle-plus-outline"
          >Action 3</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check"
          >Action 5</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <h1> 8. Table </h1>

  <el-table :data="tableData" style="width: 500px;">
    <el-table-column prop="lang" label="Language" width="180" />
    <el-table-column prop="purp" label="Purpose" />
  </el-table>
  
</template>

<style scoped>
</style>
